<template>
  <div class="login">
    <van-nav-bar>
      <template #left>
        <i @click="goBack" class="iconfont iconbtn_nav_back myicon"></i>
      </template>
    </van-nav-bar>
    <div class="coment">
      <h2>你好, 请登录</h2>
      <van-form ref="form" @submit="submit">
        <van-cell-group>
          <van-field
            v-model="use.mobile"
            clearable
            name="mobile"
            type="tel"
            placeholder="请输入手机号"
            :rules="rules.mobile"
          >
            <template #left-icon>
              <i class="iconfont iconbianzu1"></i>
            </template>
          </van-field>
          <van-field
            v-model="use.code"
            clearable
            name="code"
            placeholder="请输入验证码"
            :rules="rules.code"
          >
            <template #left-icon>
              <i class="iconfont iconyanzhengma"></i>
            </template>
            <template #button>
              <van-button
                v-if="isBack"
                native-type="button"
                class="code myColor"
                size="small"
                @click="getCode"
                >发送验证码</van-button
              >
              <van-button
                v-if="!isBack"
                native-type="button"
                class="code myColor"
                disabled
                size="small"
                >{{ time }}秒后重新发送</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
        <p class="http">
          登录即同意<span class="myColor"> 《用户使用协议》</span>和<span
            class="myColor"
          >
            《隐私协议》</span
          >
        </p>
        <van-button
          class="formBtn"
          round
          block
          type="info"
          native-type="submit"
        >
          确定
        </van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import { apiGetCode, apiLogin } from '@/api/login.js'
import { setLocal } from '@/utils/local'
export default {
  data () {
    return {
      time: 5,
      isBack: true,
      timeID1: '',
      use: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'onBlur'
          }
        ],
        code: [
          {
            required: true,
            trigger: 'onBlur'
          },
          {
            pattern: /^\d{4}$/,
            message: '请输入4位验证码',
            trigger: 'onBlur'
          }
        ]
      }
    }
  },
  methods: {
    // 后退
    goBack () {
      if (this.$route.query.redirect) {
        this.$router.push('/find')
      } else {
        this.$router.go(-1)
      }
    },
    // 登录
    async submit (value) {
      console.log(value)
      try {
        const res = await apiLogin(value)
        // 保存token
        setLocal(res.data.jwt)
        this.$store.dispatch('setUserInfo')
        if (this.$route.query.redirect) {
          this.$router.push(this.$route.query.redirect)
        } else {
          this.$router.push('/user')
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取验证码
    async getCode () {
      // 验证手机号
      try {
        await this.$refs.form.validate('mobile')
      } catch (error) {
        console.log(error)
      }
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      // 禁止点击,倒计时
      this.isBack = false
      this.timeID1 = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          this.isBack = true
          this.time = 5
          clearInterval(this.timeID1)
        }
      }, 1000)
      // 调接口获取验证码
      try {
        const res = await apiGetCode(this.use.mobile)
        this.$toast.success(res.data)
      } catch (error) {
        return error
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  font-size: 12px;
  .myicon {
    font-size: 44px;
  }
  /deep/ .coment {
    padding: 20px;
  }
  .code {
    border: none;
  }
  .http {
    margin-top: 15px;
  }
  .myColor {
    color: #16bed8;
  }
  .formBtn {
    margin-top: 30px;
  }
}
</style>
